<script setup lang="ts">
import { reactive } from 'vue'
import img1 from "@/assets/share/WB.png";
import img2 from "@/assets/share/QQ.png";
import img3 from "@/assets/share/QZ.png";
import img4 from "@/assets/share/DB.png";
const emit = defineEmits(['change'])
const props = defineProps({
  config: {
    type: Object,
    default: () => ({ title: '', pic: '', content: '' })
  },
  show: {
    type: Boolean,
    default: false
  }
})
const state = reactive({
  list: [
    { title: '新浪微博', src: img1 },
    { title: 'QQ好友', src: img2 },
    { title: 'QQ空间', src: img3 },
    { title: '豆瓣', src: img4 },
  ]
})
const handleClick = (num: number) => {
  let title = props.config.title || '自定义分享标题'
  let url = window.location.href;
  let pic = props.config.pic
  let content = props.config.content || '自定义分享描述'
  const sharesinastringArr = [
    // 微博
    `http://service.weibo.com/share/share.php?title=${encodeURIComponent(content + '「' + title + '」' + ' 点这里' + url)}`,
    // qq
    `https://connect.qq.com/widget/shareqq/index.html?url=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}`,
    // `https://connect.qq.com/widget/shareqq/index.html?url=${url}&sharesource=qzone&title==${title}&pics=${pic}&summary=${content}&desc=${content}`,
    // qq空间
    `http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?title=${encodeURIComponent(title)}&desc=${encodeURIComponent(content)}&summary=${encodeURIComponent(content)}&url=${encodeURIComponent(url)}&pics=${pic}`,
    // `https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${url}&sharesource=qzone&title=${title}&pics=${pic}&summary=${content}`,
    //下面是一些其他的链接，方法同上
    // 豆瓣: 
    `http://shuo.douban.com/!service/share?href=${url}&name=${title}&text=${content}&image=${pic}&starid=0&aid=0&style=11`,
  ]
  window.open(sharesinastringArr[num], '_blank');
  emit("change");
}

</script>

<template>
  <div class="share-list" v-show="show">
    <div v-for="(item, index) in state.list" :key="index" @click="handleClick(index)" class="item">
      <img :src="item.src" :alt="item.title">
    </div>
  </div>
</template>

<style lang="scss" scoped>
.share-list {
  display: inline-flex;

  .item {
    margin-right: 5px;
  }

  img {
    width: 24px;
    height: 24px;
    cursor: pointer;
    opacity: .7;

    &:hover {
      opacity: 1;
    }
  }
}
</style>